import React from 'react'
import {Row, Col, DatePicker, Button, Table, } from 'antd';

import { QuestionCircleOutlined} from '@ant-design/icons';
import './OrderGoodsByCustomer.css'


const {RangePicker} = DatePicker;


function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
}

function onOk(value) {
    console.log('onOk: ', value);
}

const columns = [
    {
        title: '客户名称',
        dataIndex: 'customerName',
    },

    {
        title: '商品编码',
        dataIndex: 'goodsNo',
    },
    {
        title: '商品名称',
        dataIndex: 'goodsName',
    },
    {
        title: '商品规格',
        dataIndex: 'goodsSpecs',
    },
    {
        title: <span>数量(副单位)<QuestionCircleOutlined/></span>,
        dataIndex: 'numUnit',


    },
    {
        title: '数量',
        dataIndex: 'num',
    },
    {
        title: '单位',
        dataIndex: 'unit',
    },
    {
        title: '小计金额',
        dataIndex: 'countMoney',
    },
    {
        title: '操作',
        key: 'action',
        render: () => (
            <span>
        <span style={{marginRight: 16}}>. . .</span>

      </span>
        ),
    },
];
const tableData = [
    {
        customerName:'伊藤洋华堂',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
    {
        customerName:'伊藤洋华堂',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
    {
        customerName:'欧尚超市',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
    {
        customerName:'欧尚超市',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
    {
        customerName:'欧尚超市',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
    {
        customerName:'欧尚超市',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
    {
        customerName:'欧尚超市',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
    {
        customerName:'欧尚超市',
        goodsNo: 'P89784400',
        goodsName: '跑山猪',
        goodsSpecs: "",
        numUnit:'55KG',
        num:'55',
        unit:'KG',
        countMoney: 640.5,
    },
];
const data = [];
for (let i = 1; i <= 10; i++) {
    data.push({
        key: i,
        name: 'John Brown',
        age: `${i}2`,
        address: `New York No. ${i} Lake Park`,
        description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    });
}

class OrderGoodsByCustomer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    render() {

        const {xScroll, yScroll, ...state} = this.state;

        const scroll = {};
        if (yScroll) {
            scroll.y = 240;
        }
        if (xScroll) {
            scroll.x = '100vw';
        }

        const tableColumns = columns.map(item => ({...item, ellipsis: state.ellipsis}));
        if (xScroll === 'fixed') {
            tableColumns[0].fixed = true;
            tableColumns[tableColumns.length - 1].fixed = 'right';
        }
        return (
            <div style={{padding: 10}}>
                <Row align='middle'>

                    <Col span={6}>
                        <RangePicker
                            showTime={{format: 'HH:mm'}}
                            format="YYYY-MM-DD HH:mm"
                            onChange={onChange}
                            placeholder={['起始时间', '结束时间']}
                            onOk={onOk}
                        />
                    </Col>

                    <Col span={6} offset={12} align='right'>
                        <Button style={{marginLeft: 20, width: 80, borderRadius: 4}}>导出</Button>
                    </Col>

                </Row>
                <Row className={'count'}>
                    <Col span={8} style={{paddingRight: 20, paddingTop: 10}}>
                        <Row className='countClass' style={{backgroundColor: '#FB7884'}}>
                            <Col span={24}>
                                <Row align='center' style={{fontSize: 20, fontWeight: 'bold'}}><span>18</span></Row>
                                <Row align='center'><span>订单总数</span></Row>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={8} style={{padding: 10}}>
                        <Row className='countClass' style={{backgroundColor: '#03A9F3'}}>
                            <Col span={24}>
                                <Row align='center' style={{fontSize: 20, fontWeight: 'bold'}}><span>47</span></Row>
                                <Row align='center'><span>商品总数</span></Row>
                            </Col>

                        </Row>
                    </Col>
                    <Col span={8} style={{paddingLeft: 20, paddingTop: 10}}>
                        <Row className='countClass' style={{backgroundColor: '#9675CE'}}>
                            <Col span={24}>
                                <Row align='center' style={{fontSize: 20, fontWeight: 'bold'}}><span>1900</span></Row>
                                <Row align='center'><span>总金额</span></Row>
                            </Col>

                        </Row>
                    </Col>

                </Row>
                <Row style={{marginTop: 10}}>
                    <Table
                        // rowSelection={{
                        //     ...rowSelection,
                        // }}
                        pagination={{position: ['none', 'bottomRight'], pageSize: 5}}
                        columns={columns}
                        dataSource={tableData}
                        className='table'
                    />
                </Row>
            </div>

        )

    }
}

export default OrderGoodsByCustomer